<template>
  <el-container>
    <el-header style="max-height: 35px">
      <el-form :inline="true">
        <el-form-item label="供应商名称">
          <el-input v-model="supplierName" placeholder="供应商名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onquery">查询</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="newSave">新增</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="companyName" label="供应商名称" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="code" label="社会信用代码" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="creatTime" label="注册时间" show-overflow-tooltip> </el-table-column>

        <el-table-column prop="userName" label="登录账号" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="password" label="登录密码" show-overflow-tooltip> </el-table-column>
        <el-table-column fixed="right" label="操作" width="250px">
          <template slot-scope="scope">
            <!-- <el-button size="mini" @click="edit(scope.row)">编辑</el-button> -->

            <el-dialog title="注册" :visible.sync="dialogTableVisible" :append-to-body="true">
              <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="供应商名称" prop="companyName">
                  <el-input v-model="ruleForm.companyName"></el-input>
                </el-form-item>
                <el-form-item label="社会信用代码" prop="code">
                  <el-input v-model="ruleForm.code"></el-input>
                </el-form-item>
                <el-form-item label="账号" prop="userName">
                  <el-input v-model="ruleForm.userName"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input v-model.number="ruleForm.password"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button v-if="switchon == '1' ? true : false" type="primary" @click="submitForm('ruleForm')"
                    >保存</el-button
                  >
                  <el-button v-if="switchon == '1' ? false : true" @click="newSave1()">新增</el-button>
                </el-form-item>
              </el-form>
            </el-dialog>
            <el-button size="mini" type="danger" @click="delete1(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer style="margin: 0 auto">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="paseSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-footer>
  </el-container>
</template>
<script>
import { getAction, postAction, deleteAction } from '@/api/manage'
export default {
  name: 'supplierManangnment',
  data() {
    // 0未配送，1已经配送
    return {
      ruleForm: {
        companyName: '',
        code: '',
        userName: '',
        password: '',
      },
      dialogTableVisible: false,
      supplierName: '',
      paseSize: 10,
      total: 30,
      currentPage: 1,
      tableData: [
        {
          supplierName: '供应商',
        },
      ],
      switchon: 1, // 1 编辑 2 新增
    }
  },
  methods: {
    newSave() {
      this.dialogTableVisible = true,
      this.switchon = 2;
    },
    newSave1() {
      const register = this.ruleForm
      postAction('/sys/user/register1', register).then((res) => {
        if (res.success) {
           this.dialogTableVisible =false;
          this.$notification.success({
            message: '注册成功',
          })
        } else {
          this.$notification.success({
            message: '注册失败 失败原因' + res.message,
          })
        }
      })
    },
    edit(row) {
       this.switchon = 1;
      this.dialogTableVisible = true
      this.ruleForm.companyName = row.companyName
      this.ruleForm.code = row.code
      this.ruleForm.userName = row.userName
        this.ruleForm.password = row.password
    },
    handleClick(row) {
      console.log(row)
    },
    delete1(row) {
      const param = {
        id: row.id,
        paseSize: this.paseSize,
        currentPage: this.currentPage,
      }
      console.log(param)
      deleteAction('/pdSupplier/delect', param).then((res) => {
        if (res.success) {
          this.$notification.success({
            message: '删除成功',
          })
          this.onquery()
        } else {
          this.$notification.success({
            message: '删除失败 失败原因' + res.message,
          })
        }
      })
    },
    onquery() {
      const param = {
        supplierName: this.supplierName,
        paseSize: this.paseSize,
        currentPage: this.currentPage,
      }
      getAction('/pdSupplier/find_supplier_info', param).then((res) => {
        if (res.success) {
          this.tableData = res.result['value']
          this.total = res.result['total']
        } else {
          this.$notification.success({
            message: '查询失败 失败原因' + res.message,
          })
        }
      })
    },
    /**全选 */
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSizeChange(val) {
      this.paseSize = val
      this.onquery()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.onquery()
      console.log(`当前页: ${val}`)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
  },
  created() {
    console.log('开始启动')
    this.onquery()
  },
}
</script>

<style scoped>
el-header,
el-main,
el-footer {
  padding: 0;
}

el-table-column {
  max-height: 30px;
}
</style>